<template>
  <div class="login-container">
    <div class="login-container-logo">
      <a-image :preview="false" :src="LoginLogo" width="118" height="40"></a-image>
    </div>
    <div class="login-container-body">
      <div class="body-icon">
        <img class="shadow" src="../../assets/images/shadow.png" alt="">
        <a-image :preview="false" :src="LoginIcon" fit="cover" width="100%" height="100%"></a-image>
      </div>
      <div class="body-form">
        <div class="body-form-title">欢迎登录家装通</div>
        <div class="body-form-subtitle">welcome</div>
        <div class="body-form-option" v-if="isShowChangeType">
          <div :class="{ 'title-active': isAccount }" @click="handelChangeType(true)">账户密码登录</div>
          <div :class="{ 'title-active': !isAccount }" @click="handelChangeType(false)">手机号码登录</div>
        </div>
        <template v-if="!isForgetPassword">
          <AccountLogin v-if="isAccount" @resettingPassword="resettingPassword" />
          <PhoneLogin v-else />
        </template>
        <template v-else>
          <PasswordRetrieval v-if="isRetrieval" @nextSept="nextSept" />
          <ResettingPassword v-if="isPassword" @resetPwdResult="resetPwdResult" :mobile="forgetPasswordMobile" />
          <ResettingResult :isSuccess="isResetPwdSuccess" @handelBack="handelBack" v-if="isResult" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/stores";
import { useLoading } from "@/hooks";
import { Message, type FormInstance } from "@arco-design/web-vue";
import LoginLogo from "@/assets/images/logo-icon.png";
import LoginIcon from "@/assets/images/login-icon.png";
import AccountLogin from "./components/accountLogin/index.vue";
import PhoneLogin from "./components/phoneLogin/index.vue";
import PasswordRetrieval from "./components/passwordRetrieval/index.vue";
import ResettingPassword from "./components/resettingPassword/index.vue";
import ResettingResult from "./components/resettingResult/index.vue";
import * as Regexp from "@/utils/regexp";

import { getTenantList } from "@/apis/tenant";

defineOptions({ name: "Login" });

const userStore = useUserStore();

const form = reactive({
  grantType: "",
  account: "",
  password: ""
});

const rules: FormInstance["rules"] = {
  account: [{ required: true, message: "*账号不存在请重新输入" }],
  password: [
    { required: true, message: "请输入密码" },
    { match: Regexp.Password, message: "输入密码格式不正确" }
  ]
};

// 记住密码
const checked = ref(false);
// 登录加载
const { loading, setLoading } = useLoading();
const errorMessage = ref("");

const formRef = ref<FormInstance>();
// 点击登录
const login = async () => {
  try {
    const valid = await formRef.value?.validate();
    if (valid) return;
    setLoading(true);
    await userStore.login(form);
    const { data: tenantList } = await getTenantList();
    // console.log(tenantList, "<<<<tenantList");
    const tenantId = tenantList[0].tenantId;
    // const { redirect, ...othersQuery } = router.currentRoute.value.query;
    // router.push({
    //   path: (redirect as string) || "/",
    //   query: {
    //     ...othersQuery
    //   }
    // });
    Message.success("登录成功");
  } catch (error) {
    errorMessage.value = (error as Error).message;
  } finally {
    setLoading(false);
  }
};

/**
 * 切换登录方式
 */
// 是否显示登录方式
const isShowChangeType = ref<boolean>(true);
// 是否账号登录
const isAccount = ref<boolean>(true);
// 是否找回密码
const isForgetPassword = ref<boolean>(false);
// 是否重置密码
const isRetrieval = ref<boolean>(false);
// 重置密码
const isPassword = ref<boolean>(false);
// 重置结果
const isResult = ref<boolean>(false);
/**
 * 切换登录方式
 * @param type
 */
const handelChangeType = (type: boolean) => {
  isAccount.value = type;
};
/**
 * @desc 进入手机号输入界面
 */
const resettingPassword = () => {
  isForgetPassword.value = true;
  isShowChangeType.value = false;
  isRetrieval.value = true;
};
/**
 * 开始重置密码
 */
const forgetPasswordMobile = ref("");
const nextSept = (mobile: string) => {
  forgetPasswordMobile.value = mobile;
  isPassword.value = true;
  isRetrieval.value = false;
  isResult.value = false;
};
/**
 * 重置结果
 */
// 结果
const isResetPwdSuccess = ref<boolean>(true);
const resetPwdResult = (result: boolean) => {
  isPassword.value = false;
  isRetrieval.value = false;
  isResult.value = true;
  isResetPwdSuccess.value = result;
};
/**
 * 重置成功、失败返回
 */
const handelBack = (type:string) => {
  if (type === "login") {
    isShowChangeType.value = true;
    isForgetPassword.value = false;
    isPassword.value = false;
    isRetrieval.value = true;
    isResult.value = false;
  } else if (type === "reset") {
    isPassword.value = false;
    isRetrieval.value = true;
    isResult.value = false;
  }
};
</script>

<style lang="scss" scoped>
@import "login";
</style>
